<template>
  <view class="content-search">
    <view class="weui-search-bar">
      <view
        :class="[{ fullScreen: !showMore }, { 'weui-search-bar__form': true }]"
      >
        <!-- 搜索框 -->
        <view class="weui-search-bar__box">
          <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
          <input
            type="text"
            v-if="showState"
            v-model="searchData.vehicleNo"
            class="weui-search-bar__input"
            :maxlength="maxlength"
            :placeholder="placeholder"
            @confirm="searchBycar"
          />
          <picker
            v-else
            @change="bindPicker1ChangeTop"
            :value="index1"
            mode="selector"
            :range="custList"
            :range-key="rangeKey[0]"
          >
            <view class="uni-input">{{ customerName }}</view>
          </picker>
        </view>
      </view>
      <!-- 搜索按钮,调用搜索查询方法 -->
      <view class="weui-search-bar__cancel-btn" @click="searchBycar">搜索</view>
      <view
        class="weui-search-bar__cancel-btn btn-more"
        v-if="showMore"
        @click="searchMore"
        >更多查询</view
      >
    </view>
    <uni-popup class="searchPop" ref="searchPop">
      <view class="searchBox">
        <view class="title">
          <text class="til">筛选</text>
          <uni-icons
            class="close-icon"
            @click="closeLinepop"
            type="closeempty"
            size="40rpx"
            color="#333"
          />
        </view>
        <view class="top">
          <view class="items" v-if="showState">
            <text class="til">车牌号：</text>
            <input
              type="text"
              style="margin-left: -2px"
              v-model="searchData.vehicleNo"
              class=""
              placeholder="请输入车牌号"
            />
          </view>
          <view class="items" v-if="showCustomer">
            <text class="til">客户：</text>
            <picker
              @change="bindPicker1Change"
              :value="searchDatas.customerId"
              mode="selector"
              :range="custList"
              :range-key="rangeKey[0]"
            >
              <view class="uni-input" :class="{ isactive: index1 }">{{
                customerName
              }}</view>
            </picker>
            <!-- <input type="text" v-model="searchDatas.customer" class="" placeholder="请输入车牌号"/> -->
          </view>
          <view v-if="showState" class="items">
            <text class="til">状态：</text>
            <picker
              @change="bindPicker2Change"
              mode="selector"
              :value="index2"
              :range="stateList"
              :range-key="rangeKey[1]"
            >
              <view class="uni-input" :class="{ isactive: index2 }">{{
                statusName
              }}</view>
            </picker>
            <!-- <input type="text" v-model="searchDatas.status" class="" placeholder="请输入车牌号"/> -->
          </view>
          <view class="items">
            <text class="til">时间：</text>
            <uni-datetime-picker
              v-model="range"
              type="daterange"
              @change="bindPicker3Change"
            >
            </uni-datetime-picker>
            <!-- <input type="text" v-model="searchDatas.time" class="" placeholder="请输入车牌号"/> -->
          </view>
          <view class="btn">
            <button
              class="btn2"
              type="primary"
              plain
              size="mini"
              @click="resetForm"
            >
              重置
            </button>
            <button
              class="btn1"
              type="primary"
              plain
              size="mini"
              @click="confirmForm"
            >
              确认
            </button>
          </view>
        </view>
      </view>
    </uni-popup>
    <!-- 筛选列表 -->
    <!-- <view class="uni-tab" v-if="showTab">
			<view>
				<picker @change="bindPicker1Change" :value="index1" mode="selector" :range="custList" :range-key="rangeKey[0]">
					<view class="uni-input" :class="{ isactive: index1 }">客户</view>
				</picker>
			</view>
			<view v-if="showState == 1">
				<picker @change="bindPicker2Change" mode="selector" :value="index2" :range="stateList" :range-key="rangeKey[1]">
					<view class="uni-input" :class="{ isactive: index2 }">状态</view>
				</picker>
			</view>
			<view>
				<uni-datetime-picker v-model="range" type="daterange" @change="bindPicker3Change">
					<view class="uni-input" :class="{ isactive: range.length > 0 }">时间</view>
				</uni-datetime-picker>
			</view>
			<view>
				<view class="uni-input" @click="resetClick">重置</view>
			</view>
		</view> -->
  </view>
</template>

<script>
export default {
  name: 'top-search',
  props: {
    showCustomer: {
      type: Boolean,
      default: true
    },
    showTab: {
      type: Boolean,
      default: true
    },
    showSearch: {
      type: Boolean,
      default: true
    },
    showState: {
      type: Boolean,
      default: true
    },
    showMore: {
      type: Boolean,
      default: true
    },
    custList: {
      type: Array,
      default: []
    },
    stateList: {
      type: Array,
      default: []
    },
    rangeKey: {
      type: Array,
      default: []
    },
    placeholder: {
      type: String,
      default: '请输入产品名称'
    },
    maxlength: {
      type: Number,
      default: 50
    }
  },
  data() {
    return {
      range: [],
      index2: 0,
      index1: 0,
      statusName: '请选择状态',
      customerName: '请选择客户',
      searchData: {
        vehicleNo: undefined,
        customerId: undefined,
        waybillStatus: undefined,
        startTime: undefined,
        endTime: undefined
      }
    };
  },
  methods: {
    closeLinepop() {
      this.$refs['searchPop'].close();
    },
    resetForm() {
      this.searchData = {
        vehicleNo: undefined,
        customerId: undefined,
        waybillStatus: undefined,
        startTime: undefined,
        endTime: undefined
      };
      this.range = [];
      this.customerName = '请选择客户';
      this.statusName = '请选择状态';
    },
    confirmForm() {
      console.log('提交的表单值为', this.searchData);
      this.$emit('confirmChange', this.searchData);
      this.closeLinepop();
    },
    bindPicker3Change(e) {
      console.log('maskClick事件:', e);
      this.searchData.startTime = e[0];
      this.searchData.endTime = e[1];
      // this.$emit('bind3Change', e);
    },
    searchBycar() {
      console.log('搜索', this.searchData);
      this.$emit('bindChange', this.searchData);
    },
    searchMore() {
      this.$refs['searchPop'].open('bottom');
    },
    bindPicker2Change: function (e) {
      this.index2 = e.detail.value;
      this.statusName = this.stateList[this.index2].waybillStatusName;
      this.searchData.waybillStatus = this.stateList[this.index2].waybillStatus;
      // this.$emit('bind2Change', this.stateList[this.index2]);
    },
    bindPicker1ChangeTop(e) {
      console.log('picker2发送选择改变，携带值为', this.custList);
      this.index1 = e.detail.value;
      this.customerName = this.custList[this.index1].customerName;
      this.searchData.customerId = this.custList[this.index1].id;
    },
    bindPicker1Change(e) {
      this.index1 = e.detail.value;
      this.customerName = this.custList[this.index1].customerName;
      // this.searchData.customerId = this.custList[this.index1].id
      // this.$emit('bind1Change', this.custList[this.index1]);
    },
    resetClick() {
      this.index1 = '';
      this.index2 = '';
      this.range = [];
      this.searchData = '';
      this.$emit('resetChange');
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === 'start') {
        year = year - 60;
      } else if (type === 'end') {
        year = year + 2;
      }
      month = month > 9 ? month : '0' + month;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day}`;
    },
    bindDateChange: function (e) {
      this.date = e.detail.value;
    }
  }
};
</script>

<style lang="scss" scoped>
.searchBox {
  background: #fff;
  font-size: 24.88rpx;
  .title {
    text-align: center;
    height: 46px;
    line-height: 44px;
    position: relative;
    .close-icon {
      position: absolute;
      cursor: pointer;
      right: 38rpx;
    }
  }
  .top {
    padding: 20rpx;
    .items {
      display: flex;
      justify-content: start;
      height: 40px;
      line-height: 40px;
      margin-bottom: 10px;
      .til {
        width: 60px;
        margin-right: 20rpx;
      }
      picker {
        padding: 0 10rpx !important;
      }
      picker,
      input {
        width: 81%;
        border: 1px solid #e5e5e5;
        border-radius: 4px;
        padding: 5rpx 10rpx;
        height: 40px;
        line-height: 40px;
        color: #999 !important;
      }
      input::-webkit-input-placeholder {
        color: red;
        font-size: 24.88rpx;
      }
    }
    .btn {
      text-align: center;
      margin-top: 35rpx;

      button:first-child {
        margin-right: 10rpx;
      }
      button {
        height: 45px !important;
        line-height: 45px !important;
        width: 49%;
      }
      button.btn1 {
      }
      button.btn2 {
        background-color: #d9d9d9 !important;
        border: 1rpx solid #d9d9d9 !important;
        color: #333 !important;
      }
    }
  }
}
</style>
